Better CSS-only tabs, with :target

2016年10月10日 — CSS-only tabs are a fun topic, and :target is a delightfully elegant declarative approach, except for the bit where it doesn't work.

The target-new property specifies whether new destination links should open in a new window or in a new tab of an existing window. Note: The target-new property ...

With the ':target' selector, you can add a specific style to the target element, so that it gets more attention. But you can do more. You can hide or display ...

2016年6月30日 — I believe for accessibility cases, tab is used to navigate through different elements on the page, usually there is a dotted element around ...

2017年2月5日 — This is to break the nav functionality. I wanted when section is targeted ./.../#bottom not only the to be visible, but to have a reference to ...

2023年8月17日 — The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

2017年1月15日 — 最後再把span的display設為none，就大功告成啦!如此一來就可實現出，完全不用寫到任何的程式，透過CSS樣式就可做出，頁籤式的區塊切換。

2020年12月11日 — 本篇大綱：本篇要解決的問題。頁籤Tab。手風琴Collapse。本篇算是對:target 選擇器的小練習，是真的可以不用寫JavaScript 就做出頁籤、手風琴這二個 ...

2018年8月31日 — 功能简述. 我的目标是运用CSS做一个tab页面，target属性的用法就是点击某个a标签的href 然后捏，他的href标签指向的id就是就是target。

2021年7月29日 — 本篇整理所有TAB 頁籤選單以純CSS 實現的各種方案，並提供最簡單的架構、最容易維護的模組範本。